

<template>
<div class="app-container import-page">
  <el-alert
    type="warning"
    :closable="false"
  >
    <div style="width: 100%;display: flex;justify-content: space-between;align-items: center">
      <div>下载导入模板，根据模板提示完善内容</div>
      <el-button type="warning" @click="downloadTemplate">下载模板</el-button>
    </div>
  </el-alert>
  <div style="padding:20px 0;">
    <el-upload
      ref="upload"
      class="upload-demo"
      drag
      :action="baseUrl"
      :limit="1"
      :headers="headers"
      :auto-upload="false"
      :on-success="successHandle"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>

  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitUpload">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</div>
</template>
<script>
import AddMixin from "@/minixs/add"
import {getToken} from "@/utils/auth";
export default {
  name: "import",
  mixins:[AddMixin],
  data(){
    return {
      baseUrl: process.env.VUE_APP_BASE_API+"/info/base/template/render",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
    }
  },
  methods:{
    downloadTemplate(){
      this.download('/info/base/template/download', {
        ...this.queryParams
      }, `企业基地_模板_${new Date().getTime()}.xlsx`)
    },
    submitUpload(){
      this.$refs.upload.submit();
    },
    successHandle(res, file){
      if(res.code === 200){
        this.$modal.msgSuccess("新增成功");
        this.$emit("reload")
        this.cancel();
      }
    }
  }
}
</script>
<style scoped lang="scss">
.import-page{
  ::v-deep .el-alert__content{
    width: 100%;
  }
  ::v-deep .el-alert__description{
    width: 100%;
  }
}
</style>
